<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { VueFlow, Position } from '@vue-flow/core';
import type { Node, Edge } from '@vue-flow/core';
import APINode from '@/pages/vueflow/components/APINode.vue';

const flowRef = ref<typeof VueFlow>();
const nodes = ref<Node[]>([]);
const edges = ref<Edge[]>([]);

onMounted(() => {
  setTimeout(() => {
    initDatas();
  }, 2000);
});

const initDatas = () => {
  const node1: Node = {
    id: 'node1',
    type: 'api',
    data: { label: 'Node 1' },
    position: { x: 0, y: 50 },
    sourcePosition: Position.Right,
    targetPosition: Position.Left, //默认的targerPosition是Top
  };
  const node2: Node = {
    id: 'node2',
    type: 'api',
    data: { label: 'Node 2' },
    position: { x: 200, y: 50 },
    sourcePosition: Position.Left,
    targetPosition: Position.Right,
  };
  const edge1: Edge = {
    id: 'edge1',
    source: 'node1',
    target: 'node2',
    type: 'default',
  };

  nodes.value = [node1, node2];
  edges.value = [edge1];
};
</script>

<template>
  <VueFlow ref="flowRef" v-model:nodes="nodes" v-model:edges="edges" class="vueflow-container">
    <template #node-api="props">
      <APINode :node-value="props" />
    </template>
  </VueFlow>
</template>

<style scoped lang="less">
.vueflow-container {
  display: flex;
  flex-direction: column;
  height: 80vh;
  width: 100%;
}
</style>
